<template>
  <div class="playerCon">
    <div :id="playerId"></div>
    <!-- videoLoading -->
    
  </div>
</template>
<script setup>

import EZUIKit from "ezuikit-js"
let player = ref(null)
let props = defineProps({
  playerId: {
    type: String,
    default: "",
  },
  videoUrl: {
    type: String,
    default: "",
  },
  width: {
    type: Number,
    default: 360,
  },
  height: {
    type: Number,
    default: 300,
  },
  accessToken: {
    type: String,
    default: "",
  },
  template: {
    type: String,
    default: "pcLive" /* pcLive */,
  },
})
const isPause = ref(false)
onMounted(async () => {
  /* StructureEZUIKitPlayer()*/
  setTimeout(() => {
    player.value.closeSound()
  }, 5000)
  setTimeout(() => {
    player.value?.stop().then((data) => {
      isPause.value = true
    })
  }, 300000) //300000
})
onBeforeUnmount(() => {
  player.value.stop()
})
/* const loachSearchKey = async (e) => {
  if (e.key === "powerstationKey") {
    await player.value.stop()
    await player.value.destroy()

    //StructureEZUIKitPlayer()
  }
} */
const StructureEZUIKitPlayer = () => {
  let themeData = {
    header: {
      color: "#fff",
      activeColor: "#FFFFFF",
      backgroundColor: "#000000",
      btnList: [
        {
          iconId: "deviceID",
          part: "left",
          defaultActive: 0,
          memo: "顶部设备序列号",
          isrender: 1,
        },
        {
          iconId: "deviceName",
          part: "left",
          defaultActive: 0,
          memo: "顶部设备名称",
          isrender: 1,
        },
        {
          iconId: "cloudRec",
          part: "right",
          defaultActive: 0,
          memo: "云存储",
          isrender: 0,
        },
        {
          iconId: "rec",
          part: "right",
          defaultActive: 0,
          memo: "SD卡回放",
          isrender: 0,
        },
      ],
    },
    footer: {
      color: "#FFFFFF",
      activeColor: "#1890FF",
      backgroundColor: "#00000021",
      btnList: [
        {
          iconId: "play",
          part: "left",
          defaultActive: 1,
          memo: "播放",
          isrender: 1,
        },
        {
          iconId: "capturePicture",
          part: "left",
          defaultActive: 0,
          memo: "截屏按钮",
          isrender: 1,
        },
        {
          iconId: "sound",
          part: "left",
          defaultActive: 0,
          memo: "声音按钮",
          isrender: 1,
        },
        {
          iconId: "pantile",
          part: "left",
          defaultActive: 0,
          memo: "云台控制按钮",
          isrender: 1,
        },

        {
          iconId: "zoom",
          part: "left",
          defaultActive: 0,
          memo: "电子放大",
          isrender: 1,
        },
        /* {
          iconId: "hd",
          part: "right",
          defaultActive: 0,
          memo: "清晰度切换按钮",
          isrender: 1,
        }, */
        {
          iconId: "webExpend",
          part: "right",
          defaultActive: 0,
          memo: "网页全屏按钮",
          isrender: 1,
        },
      ],
    },
  }

  player.value = new EZUIKit.EZUIKitPlayer({
    id: props.playerId, // 视频容器ID
    accessToken: props.accessToken,
    url: props.videoUrl,
    //template: props.template, //"pcRec",
    themeData: themeData,
    width: props.width,
    height: props.height,
    autoplay: false,
    handleSuccess: handleSuccessCllBack,
    handleError: handleError,
  })
}

const handleSuccessCllBack = () => {
  isPause.value = false
}
const handleError = () => {
  loading.value = false
  videoLoading.value = false
}
const loading = ref(false)
const playContinue = () => {
  loading.value = true
  player.value.play().then(() => {
    loading.value = false
  })
}
const videoUrl = computed(() => {
  return props.videoUrl
})
const videoLoading = ref(false)
watch(
  () => [props.videoUrl],
  async ([newValue]) => {
    if (newValue) {
      videoLoading.value = true
      /*  await player.value.stop()
      await player.value.destroy()
      StructureEZUIKitPlayer() */
      StructureEZUIKitPlayer()
      await player.value.stop()
      player.value.changePlayUrl(newValue)
      /* player.value.play({
        url: newValue,
        audio: 0,
      }) */
    }
  },
  { immediate: true }
)
const change = () => {
  //player.value.stop();
  // 切换为直播
  // player.play({
  //   url:"ezopen://open.ys7.com/244640009/1.live"
  // })
  // setTimeout(()=>{
  //   player.play({
  //     url:"ezopen://open.ys7.com/244640009/1.live"
  //   })
  // },1000)
}
</script>
<style lang="less">
#video-container {
  width: 100%;
  height: 800px;
}
.playerCon {
  position: relative;
  .stopBg {
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
  }
  .videoLoadingMask {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
